<template>
  <el-dialog :visible.sync="visible" >
    <choice-box ref="cbox" :mode="2" @cancel="cancel" @success="fileCallback"></choice-box>
  </el-dialog>
</template>

<script>
  import choiceBox from "./choiceBox"
  export default {
    name: "choice-dialog",
    components:{choiceBox},
    props:{
      show:{
        type:Boolean,
        default:false
      }
    },
    watch: {
      show () {
        this.visible = this.show;
        if(this.show && this.$refs.cbox) {
          // console.log(this.$refs)
          this.$refs.cbox.show()
        }
      },
      visible(){
        this.$emit('update:show', this.visible)
      }
    },
    data(){
      return {
        visible: this.show
      }
    },
    methods:{
      fileCallback(e){
        this.$emit('success',e)
      },
      cancel(){
        this.$emit('update:show', false)
      }
    }
  }
</script>

<style lang="scss">

</style>
